<template>
 <a-layout>
      <a-layout-header style="background: #fff; padding: 0">
         <a-breadcrumb style="margin: 0 16px">
            <a-breadcrumb-item>人员列表 </a-breadcrumb-item>
            <a-breadcrumb-item>人员详情 </a-breadcrumb-item>
        </a-breadcrumb>
        <header  style="padding-left: 20px; ">详情页</header>
      </a-layout-header>
      <a-layout-content style="margin: 20px 16px">
        <div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">
         <a-table bordered :columns="columns" :data-source="getWorkerDetail"  rowKey="user_id">
          <template  slot="edit"  slot-scope="text" >
              <a @click.prevent=makeEdit(text)>去编辑</a>
          </template>
        </a-table>
        </div>
      </a-layout-content>
     
    </a-layout>
</template>

<script>
const columns = [
  {
    title: 'Id',
    dataIndex: 'user_id',
    width: 100,
  },
  {
    title: '姓名',
    dataIndex: 'username',
    width: 100,
  },
  {
    title: '年龄',
    dataIndex: 'age',
    width: 100,
  },
  
  {
    title: 'Email',
    key: 'email',
    dataIndex: 'email',
    width: 200,
  },
  {
      title: '电话',
      key: 'phone',
      dataIndex: 'mobile',
      width: 200
  },
  {
    title: '编辑',
    key: 'edit',
    scopedSlots: { customRender: 'edit' },
  }
];

import {mapGetters} from 'vuex'
export default {
   
    data() {
    return {
        columns
    
    };
  },
  
  computed: {
      // 从getter中获取数据
    ...mapGetters(['getWorkerDetail'])
  },
  methods: {
      makeEdit(text){
         
          this.$router.push(`/edit/${text.user_id}`)
      }
  }
}
</script>
<style lang='' scoped>
</style>